<template>
  <el-row>
    <el-col :span="6" class="card-table-item" v-auth="auth.add">
      <div class="card-main" @click="handleOperate('add', {}, '新增模板')">
        <div class="flex card-content card-content-add fc align-center">
          <IconAdd style="width: 48px; height: 48px; margin-right: 8px"></IconAdd>
          <span class="text-black">新增材料表单</span>
        </div>
      </div>
    </el-col>
    <el-col :span="6" v-for="(item, i) in tableData" :key="i" class="card-table-item">
      <div class="card-main">
        <div class="flex card-content" @click="handleOperate('preview', item, '详情')">
          <IconForm style="width: 64px; height: 64px; margin-right: 8px"></IconForm>
          <div class="right">
            <p class="text-black">
              <strong>{{ item.templateName }}</strong>
            </p>
            <div class="text-gray f14" style="word-wrap: break-word; width: 100%">{{ item.info }}</div>
          </div>
        </div>
        <div class="flex card-footer f-between tc">
          <el-button text class="flex1" @click="handleOperate('design', item, '设计表单')">设计表单</el-button>
          <span>|</span>
          <el-button text class="flex1" @click="handleOperate('edit', item, '编辑模板')">编辑</el-button>
          <span>|</span>
          <el-button text class="flex1" @click="handleOperate('delete', item, '删除模板')">删除</el-button>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import IconForm from './icons/IconForm.vue'
import IconAdd from './icons/IconAdd.vue'
type Props = {
  tableData: any
  auth: any
}
withDefaults(defineProps<Props>(), {
  tableData: [],
})

const emit = defineEmits(['change'])
const handleOperate = (type, row, title) => {
  emit('change', type, row, title)
}
</script>

<style scoped lang="scss">
.card-table-item {
  margin-top: vw(15);
}

.card-main {
  margin: 6px;
  box-shadow: 5px 8px 3px 0px #f9f9f9c2;
  border-radius: 10px;
  border: 1px solid #eee;
  min-height: 10rem;
  position: relative;

  .card-content {
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
  }

  .card-content-add {
    &:hover {
      cursor: pointer;
    }
  }
}

.card-footer {
  background: #eee;
  color: #bbb;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;

  &:hover {
    cursor: pointer;
  }
}
</style>
